import { useMemo } from "react";
import EditPage, { createFields } from "../../Component/ResourceList/Edit";
import {
    SCIENCE_VENUE_BOOK_DATE,
    SCIENCE_VENUE_BOOK_TYPES,
    SCIENCE_VENUE_EDU_LEVELS,
    SCIENCE_VENUE_NATURAL_EDU_TYPES,
    SCIENCE_VENUE_SOCIAL_EDU_TYPES,
    SCIENCE_VENUE_SPIRIT_EDU_TYPES,
    SCIENCE_VENUE_TYPES
} from "./Data";
import Images, { uploadValidate } from "./Images";
import Videos from "./Videos";
import styles from "./style.module.scss";
import VisisteDateTime from "./VisisteDateTime";
import IdentityDate from "./IdentityDate";
import { LibAppView } from "@/lib";
import { utils } from "elmer-common";
import { cnArray } from "@/lib/utils";

const VenueEdit = () => {
    const journeyData = LibAppView.useJourneyData();
    const editData = journeyData.currentStepState || {};
    const isAddMode = utils.isEmpty(editData.id);
    
    const fields = useMemo(() => {
        return createFields([{
            label: "场馆全称",
            name: "title",
            type: "Input",
            required: true,
            props: {
                placeholder: "请输入法定全称"
            }
        }, {
            label: "登录账号",
            name: "ownerLoginName",
            type: "Input",
            required: true,
            rules: [{
                required: true,
                message: "请输入登录账号"
            },{
                max: 20,
                min: 4,
                message: "登录账号长度为4-20个字符"
            },{
                validator: (rule, value) => {
                    return /^[a-z\d_-]{4,20}$/i.test(value) ? Promise.resolve() : Promise.reject("请输入4-20位英文数字组合");
                },
                message: "登录账号只允许中英文、数字、下划线、中划线，长度为4-20个字符"
            }],
            placeholder: "中英文、数字、下划线、中划线，长度为4-20个字符"
        },{
            label: "省份",
            name: "region",
            type: "Region",
            required: true,
            rules: [{
                validator: (rule: any, value: string[]) => {
                    const positive = value && value.length === 3;
                    console.log(value,);
                    return positive ? Promise.resolve() : Promise.reject("请选择省/市/区");
                },
            }],
            placeholder: "请选择省/市/区",
            props: {
                placeholder: "请选择省/市/区",
            }
        }, {
            label: "详细地址",
            name: "addr",
            type: "Input",
            required: !isAddMode,
            props: { placeholder: "请输入精准定位的门牌地址" }
        }, {
            label: "基地特色介绍",
            name: "description",
            type: "TextArea",
            required: !isAddMode,
            props: {
                placeholder: "300字以内，需包含“场馆特色”“科普亮点”等内容；提供年均接待量、特色课程数量等关键数据。文字简练，避免专业术语堆砌。"
            }
        }, {
            label: "联系人",
            name: "contactor",
            type: "Input",
            required: !isAddMode,
            props: {
                type: "text",
                placeholder: "请输入联系人姓名"
            }
        }, {
            label: "联系方式",
            name: "mobile",
            type: "Input",
            required: !isAddMode,
            props: {
                type: "tel",
                placeholder: "请输入联系人手机号码"
            }
        }, {
            label: "预约方式",
            name: "bookType",
            type: "CheckGroup",
            required: !isAddMode,
            props: { options: SCIENCE_VENUE_BOOK_TYPES }
        }, {
            label: "官方微信公众号",
            name: "官方微信公众号",
            type: "Input",
            props: { placeholder: "如有场馆官方微信公众号,填写完整名称"}
        },
        {
            label: "开放时间",
            name: "openDate",
            type: "CheckGroup",
            required: !isAddMode,
            props: { options: SCIENCE_VENUE_BOOK_DATE }
        }, {
            label: "参观时间",
            name: "visitingTime",
            type: "Custom",
            required: !isAddMode,
            props: { placeholder: "例“9:00-17:00”" },
            Component: VisisteDateTime
        }, {
            label: "场馆类型",
            name: "venueType",
            type: "RadioGroup",
            required: !isAddMode,
            props: {
                options: SCIENCE_VENUE_TYPES
            }
        }, {
            label: "科普教育层级",
            name: "educationLevel",
            type: "Select",
            required: !isAddMode,
            props: { options: SCIENCE_VENUE_EDU_LEVELS }
        }, {
            label: "认定期限",
            name: "identityDate",
            type: "Custom",
            required: !isAddMode,
            placeholder: "如：2020-2025",
            Component: IdentityDate
        }, {
            label: "自然科学类科普教育基地类型",
            name: "naturalScienceEduType",
            type: "Select",
            required: !isAddMode,
            props: {
                options: SCIENCE_VENUE_NATURAL_EDU_TYPES
            }
        }, {
            label: "社会科学类科普教育基地类型",
            name: "socialScienceEduType",
            type: "Select",
            required: !isAddMode,
            props: { options: SCIENCE_VENUE_SOCIAL_EDU_TYPES }
        }, {
            label: "科学家精神教育基地层级",
            name: "scientistSpiritEduType",
            type: "RadioGroup",
            required: !isAddMode,
            props: { options: SCIENCE_VENUE_SPIRIT_EDU_TYPES }
        }, {
            label: "科学家精神教育基地认定有效期",
            name: "scientistSpiritIdentifyDate",
            type: "Custom",
            required: !isAddMode,
            Component: IdentityDate
        },
        // {
        //     label: "是否综合科技馆",
        //     name: "comprehensive",
        //     type: "Switch",
        //     props: {
        //         checkedText: "是",
        //         unCheckedText: "否"
        //     }
        // },
        {
            label: "江苏省新质生产力科技馆",
            name: "productivity",
            type: "Switch",
            props: {
                checkedText: "是",
                unCheckedText: "否"
            }
        },{
            label: "宣传视频",
            name: "videos",
            type: "Custom",
            Component: Videos,
            props: {
                validate: (file:File) => {
                    return file.size <= 200 * 1024 * 1024;
                },
                description: <p>视频大小不超过200M</p>
            }
        },{
            label: "宣传主图",
            name: "cover",
            type: "Cover",
            required: !isAddMode,
            props: {
                validate: uploadValidate,
                description: ( <section className={styles.imageSizeRequirement}>
                    <h4>图片要求</h4>
                    <p>1. 图片格式统一为“JPG”格式。</p>
                    <p>2. 单张图片大小需≤1MB，分辨率≥300dpi，画质清晰，主题突出。</p>
                    <p>3. 可清晰显示基地、场馆名称为宜</p>
                </section>)
            }
        },{
            label: "展示图片",
            name: "images",
            type: "Custom",
            Component: Images,
            required: !isAddMode,
            props: {
                validate: uploadValidate,
                reviewRight: editData?.status > 0,
                description: (<><p>3. 可清晰显示基地、场馆名称为宜</p></>)
            }
        }]);
    }, [editData, isAddMode]);
    return <EditPage
            reviewRight={editData?.status > 0}
            initValues={{
                status: 1
            }}
            submitEndPoint="venue.submit"
            fields={fields}
            buildResponse={(response: any) => {
                const region = [ response.province, response.city, response.area ];
                const openDate = response.openDate ? JSON.parse(response.openDate) : [];
                const images = response.openDate ? JSON.parse(response.images) : [];
                const bookType = response.bookType && response.bookType != "" ? JSON.parse(response.bookType) : [];
                const videos = response.videos && response.videos != "" ? JSON.parse(response.videos) : [];
                return {
                    ...response,
                    region: cnArray(region),
                    openDate,
                    images,
                    bookType,
                    videos,
                    comprehensive: response.comprehensive === 1,
                    productivity: response.productivity === 1
                }
            }}
            buildRequest={(formData: any) => {
                const region = formData.region || [];
                return {
                    ...formData,
                    status: 2,
                    approveMsg: "",
                    province: region[0],
                    city: region[1],
                    area: region[2],
                    openDate: JSON.stringify(formData.openDate || []),
                    images: JSON.stringify(formData.images || []),
                    bookType: JSON.stringify(formData.bookType || []),
                    videos: JSON.stringify(formData.videos || []),
                    comprehensive: formData.comprehensive ? 1 : 0,
                    productivity: formData.productivity ? 1 : 0
                }
        }}/>;
};
export default VenueEdit;